<template>
  <div id="map"></div>
</template>

<script>
import jsonp from 'jsonp'
export default {
  data () {
    return {}
  },
  mounted () {
    // aMsZ7xkRkAQpjYPlOmFDKfjwpfNKHoaq
    jsonp('https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aMsZ7xkRkAQpjYPlOmFDKfjwpfNKHoaq', {}, () => {
      this.initMap()
    })
  },
  methods: {
    initMap () {
      const map = new window.BMapGL.Map('map')
      // console.log(map)
      const point = new window.BMapGL.Point(116.404, 39.915)
      // console.log(point)
      map.centerAndZoom(point, 15)
      map.enableScrollWheelZoom(true)
      map.setHeading(64.5)
      map.setTilt(73)
      const scaleCtrl = new window.BMapGL.ScaleControl()
      map.addControl(scaleCtrl)
      const marker1 = new window.BMapGL.Marker(new window.BMapGL.Point(116.404, 39.925), {
        enableDragging: true
      })
      map.addOverlay(marker1)
    }
  }
}
</script>

<style scoped>
#map {
  width: 800px;
  height: 500px;
  border: 3px solid pink;
}
</style>
